<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博文尚美</title>
    <link rel="stylesheet" href="./css/common.css">
    <style>
        #banner{position: relative;}
        #banner .banner_list{width: 100%;height: 469px;position: relative;}
        #banner .banner_list li{width: 100%;height: 100%; background: center 0 no-repeat;
            position: absolute; left: 0;top: 0;z-index: 1;opacity: 0;}
        #banner .banner_list li.active{z-index: 10;opacity: 1;}
        #banner .banner_list li a{display: block;width: 100%;height: 100%;}
        #banner .banner_btn{position: absolute;bottom: 19px;z-index: 20;
            width: 100%; font-size: 0;text-align: center;}
        #banner .banner_btn li{display: inline-block;width: 12px;height: 12px;margin:0 6px;
            border-radius: 50%;border: 2px white solid;box-sizing: border-box;cursor: pointer;}
        #banner .banner_btn li.active{background-color: white;}

        #service{overflow: hidden;min-height: 407px;}
        #service .service_list{text-align: center;margin-top: 34px;}
        #service .service_list div{width: 102px;height: 102px;margin:0 auto;}
        #service .service_list li{float: left;width: 250px;margin: 0 10px;}
        #service .service_list p{font-size: 14px;color: #6d6d6d;line-height: 22px;}
        #service .service_list h3{font-size: 18px;color: #434343;line-height: 36px;margin-top: 25px;}

        #case{background-color: #f8f8f8;}
        #case .container{overflow: hidden;min-height: 460px;}
        #case .area_title{margin-top: 55px;}
        #case .case_list{margin-top: 28px;}
        #case .case_list li{float: left;width: 340px;margin: 0 10px;}
        #case .case_btn{width: 176px;height: 37px;background: #66C5B4;font-size: 14px;
            margin: 36px auto 0 auto;border-radius: 25px;line-height: 37px;text-align: center;}
        #case .case_btn a{display: block;height: 100%;width: 100%;color: white;}

        #news{min-height: 450px;overflow: hidden;}
        #news .area_title{margin-top: 65px;}
        #news dl{margin-top: 48px;}
        #news dt{float: left; width: 234px;}
        #news dd{float: left; width: 846px;}
        #news .news_list{width: 100%;}
        #news .news_list li{float: left;width: 50%;margin-bottom: 48px;}
        #news .news_date{width: 71px;border-right: 1px solid #DCDCDC;text-align: center;}
        #news .news_date i{display: block; color: #66C5B4;font-size: 39px;font-weight: bold;}
        #news .news_date span{color: #999999;font-size: 20px;line-height: 36px;}
        #news .news_text{width: 310px;margin-left: 20px;}
        #news .news_text p{color: #a4a4a4;font-size: 12px;line-height: 21px;}
        #news .news_text h3{font-size: 14px; margin-bottom: 17px;}
        #news .news_text h3 a{color: #3f3f3f;}

        #foot{background: #66C5B4;}
        #foot .container{height: 54px;line-height: 54px;font-size: 12px;color: white;}
        #foot div a{margin: 0 10px;color: white;}
    </style>
</head>
<body>
    <div id="head" class="container">
        <div class="head_logo l">
            <a href="#">
                <img src="./image/logo.png" alt="博文尚美首页" title="博文尚美首页">
            </a>
        </div>
        <ul class="head_menu r">
            <li>
                <a href="#">HOME</a>
            </li>
            <li>
                <a href="#">ABOUT</a>
            </li>
            <li>
                <a href="#">PROTFOLIO</a>
            </li>
            <li>
                <a href="#">SERVICE</a>
            </li>
            <li>
                <a href="#">NEWS</a>
            </li>
            <li>
                <a href="#">CONTACT</a>
            </li>
        </ul>
    </div>
    <div id="banner" class="contaner-fluid">
        <ul class="banner_list">
            <li style="background-image:url(./image/背景.png)">
                <a href="#"></a>
            </li>
            <li class="active" style="background-image:url(./image/背景.png)">
                <a href="#"></a>
            </li>
            <li style="background-image:url(./image/背景.png)">
                <a href="#"></a>
            </li>
            <li style="background-image:url(./image/背景.png)">
                <a href="#"></a>
            </li>
        </ul>
        <ol class="banner_btn">
            <li></li>
            <li class="active"></li>
            <li></li>
            <li></li>
        </ol>
    </div>
    <div id="service" class="container">
        <div class="area_title">
            <h2>服务范围</h2>
            <p>OUR SERVICES</p>
        </div>
        <ul class="service_list">
            <li>
                <div>
                    <img src="./image/web1.png" alt="" srcset="">
                </div>
                <h3>1.WEB DESIGN</h3>
                <p>企业品牌网站设计/手机网站制作<br> 动画网站创意设计</p>
            </li>
            <li>
                <div>
                    <img src="./image/graphic1.png" alt="" srcset="">
                </div>
                <h3>2.GRAPHIC DESIGN</h3>
                <p>标志logo设计/产品宣传册设计<br> 企业广告/海报设计</p>
            </li>
            <li>
                <div>
                    <img src="./image/e-bussiness1.png" alt="" srcset="">
                </div>
                <h3>3.E-BUSSINESS PLAN</h3>
                <p>淘宝/天猫装修设计及运营推广<br> 企业微博、微信营销</p>
            </li>
            <li>
                <div>
                    <img src="./image/mail1.png" alt="" srcset="">
                </div>
                <h3>4.MAILBOXAGEBTS</h3>
                <p>腾讯/网易企业邮箱品牌代理<br> 个性化邮箱定制开发</p>
            </li>
        </ul>
    </div>
    <div id="case" class="contaner-fluid">
        <div class="container">
            <div class="area_title">
                <h2 style="color: #93d4c8;">{ 客户案例 } </h2>
                <p>With the best professional technology, to design the best innov</p>
            </div>
            <ul class="case_list clear">
                <li>
                    <a href="#"><img src="./image/20141121095528549.png" alt="" srcset=""></a>
                </li>
                <li>
                    <a href="#"><img src="./image/20141121095216750.png" alt="" srcset=""></a>
                </li>
                <li>
                    <a href="#"><img src="./image/20141121105856226.png" alt="" srcset=""></a>
                </li>
            </ul>
            <div class="case_btn">
                <a href="#">view more</a>
            </div>
        </div>
    </div>
    <div id="news" class="container">
        <div class="area_title">
            <h2>最新资讯</h2>
            <p>TEH LATEST NEWS</p>
        </div>
        <dl>
            <dt>
                <img src="./image/xs1.png" alt="">
            </dt>
            <dd>
                <ul class="news_list">
                    <li>
                        <div class="news_date l">
                            <i>09</i>
                            <span>Jan</span>
                        </div>
                        <div class="news_text l">
                            <h3><a href="#">网站排名进入前三的技巧说明</a></h3>
                            <p>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎 首页，更不用说进首页前三了。那么网站优...</p>
                        </div>
                    </li>
                    <li>
                        <div class="news_date l">
                            <i>08</i>
                            <span>Jan</span>
                        </div>
                        <div class="news_text l">
                            <h3><a href="#">flash网站制作的优缺点</a></h3>
                            <p>虽然HTML5程序语言出现，大有逐渐代替Flash网站制作的意味，但是过于生硬的HTML5动画效果，始终...</p>
                        </div>
                    </li>
                    <li>
                        <div class="news_date l">
                            <i>07</i>
                            <span>Jan</span>
                        </div>
                        <div class="news_text l">
                            <h3><a href="#">做个网站多少钱？</a></h3>
                            <p>“做个网站多少钱？”很多客户打电话过来直接第一句就抛出来的问题。这好比买辆车多少钱，你是要...</p>
                        </div>
                    </li>
                    <li>
                        <div class="news_date l">
                            <i>06</i>
                            <span>Jan</span>
                        </div>
                        <div class="news_text l">
                            <h3><a href="#">哪些网站优化手法属于网站过度优化</a></h3>
                            <p>大部分人都想让自己的网站，一夜之间出现在搜索引擎首页，独占鳌头。但是事实告诉我们罗马不是一...</p>
                        </div>
                    </li>
                </ul>
            </dd>
        </dl>
    </div>
    <div id="foot" class="contaner-fluid">
        <div class="container">
            <p class="l">Copyright 2006- 2014 Bowenshangmei Culture All Rights Reserved</p>
            <div class="r">
                <a href="#">Home</a>| 
                <a href="#">About</a> | 
                <a href="#">Portfolio</a> | 
                <a href="#">Contact</a>
            </div>
        </div>
    </div>
</body>
</html>